<template>
	<view>
		<header-bar :title=titleName>
			<uni-icons type="undo" size="23" slot="back"></uni-icons>
		</header-bar>
		<view class="btn b" @click="go">返回首页</view>
		<view class="con flex-column">
			<image src="https://s2.loli.net/2022/05/29/gMQfRt7zab8Njvo.png" class="bg_img"></image>
			<view class="draw_sc flex-row">
				<image src="https://s2.loli.net/2022/05/29/4LBqFlmWyCkfuS9.png" class="draw_icon" />
				<swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="3000"
					display-multiple-items='1'>
					<block wx:for-index="idx" :wx:for='2' wx:key="index">
						<swiper-item>
							<view>
								<text :decode="true">恭喜用户&nbsp;&nbsp;&nbsp;</text>
								<text class="draw_text"> 135XXXX5678 </text>
								<text :decode="true">&nbsp;&nbsp;抽中拍立得相机</text>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="draw_con">
				<image src="https://s2.loli.net/2022/05/29/foJwqWdz4pkAtr9.png" class="bg_img" />
				<view class="flex-row j_b prize_box">
					<block :wx:for="prize_list" wx:key="index">
						<!-- 抽奖 按钮-->
						<block :wx:if="index == 4">
							<view class="prize_start prize_item">
								<image src="https://s2.loli.net/2022/05/29/zwHUBs9AvRil6e4.png" class="lott_btn"
									mode="aspectFill" bindtap="lottery"></image>
							</view>
						</block>
						<!-- 奖项 -->
						<view class="prize_item flex-column">
							<view class="prize_img ">
								<image :src="item.icon" mode="aspectFill" />
							</view>
							<text>{{index}}{{item.name}}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="remainin_text">您还有<text>{{remian_num}}次</text>抽奖机会</view>
		</view>
		<!-- 活动内容按钮 -->
		<view class="btn" catchtap="toDetail">活动内容</view>
		<!--抽奖记录  -->
		<view :wx:if="true" class="draw_bot">
			<view class="flex-row j_c">
				<view class="line"></view>
				<view class="bot_title flex-column">我的抽奖记录</view>
				<view class="line">
				</view>
			</view>
			<swiper class="bot_swiper" vertical="true" autoplay="true" circular="true" interval="3000"
				display-multiple-items='3'>
				<block wx:for-index="idx" :wx:for='9' wx:key="index">
					<swiper-item>
						<view class="flex" style="align-items: baseline;">
							<text :decode="true">5月21日 10：20：01 &nbsp;&nbsp;&nbsp;</text>
							<text :decode="true" class="bot_text text_ellipsis">&nbsp;&nbsp;抽中了奶粉券加水电费扫地</text>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleName: "抽奖活动",
				remian_num: 5, //剩余抽奖的次数
				prize_list: [{
						icon: 'https://img.alicdn.com/imgextra/i2/1714128138/O1CN01vlPYdF29zFvaH8Oxr_!!1714128138.jpg_430x430q90.jpg',
						name: '扫地机器人',
						active: false
					},
					{
						icon: 'https://tse1-mm.cn.bing.net/th/id/R-C.4a2dddb79f408580693895479284c627?rik=h0TQa%2fmee3YXtQ&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f17%2f02%2f19%2f2e53d8fbcd03a7d13c5d381bba698fe5.jpg&ehk=s6jLOkSsRjaeKRBBP6IervECLClsNF0oBPBy2UMRN%2f4%3d&risl=&pid=ImgRaw&r=0',
						name: '谢谢惠顾',
						active: false,
					},
					{
						icon: 'https://img.alicdn.com/imgextra/i3/3081047815/O1CN01Z1C1r427bK0G05hLy_!!3081047815.png_430x430q90.jpg',
						name: '智能音箱',
						active: false,
					},
					{
						icon: 'https://img.alicdn.com/imgextra/i2/2206781073742/O1CN018SHxta1dVspkP5LRv_!!2206781073742.jpg_430x430q90.jpg',
						name: '智能手表',
						active: false,
					},
					{
						icon: 'https://img.alicdn.com/imgextra/i3/2126359483/O1CN01E9vio52JvGaX5d9DI_!!2126359483.jpg_430x430q90.jpg',
						name: '拍立得相机',
						active: false,
					},
					{
						icon: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/128617108/O1CN01gHkYMb22NVngZs6r8_!!0-saturn_solar.jpg_250x250.jpg_.webp',
						name: '滑板车',
						active: false,
					},
					{
						icon: 'https://img.alicdn.com/imgextra/i3/2200877014436/O1CN01n83JlJ1idjanFSE51_!!2200877014436.jpg_430x430q90.jpg',
						name: '电热水壶',
						active: false,
					},
					{
						icon: 'https://tse1-mm.cn.bing.net/th/id/R-C.4a2dddb79f408580693895479284c627?rik=h0TQa%2fmee3YXtQ&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f17%2f02%2f19%2f2e53d8fbcd03a7d13c5d381bba698fe5.jpg&ehk=s6jLOkSsRjaeKRBBP6IervECLClsNF0oBPBy2UMRN%2f4%3d&risl=&pid=ImgRaw&r=0',
						name: '谢谢惠顾',
						active: false,
					},
				],
				lock: false, //防止重复点击
				prizeListIndex: [0, 1, 2, 4, 7, 6, 5, 3], //抽奖顺序的索引
				// 抽奖动画
				Timer: null,
				LotteryEnd: false, //抽奖结束
				nowRunIndex: 0, //ative样式的索引，
			};
		},
		onLoad() {},
		methods: {
			go: function() {
				uni.switchTab({
					url: '/pages/logo/logo'
				})
			},
			catchTouchMove: function() {
				return false;
			},
			// 范围随机数
			randomRange(lower, upper) {
				return Math.floor(Math.random() * (upper - lower)) + lower;
			},
			luckChose(luckIndex) {
				return new Promise((resolve, reject) => {
					console.log("中奖索引>>>", luckIndex)
					let that = this
					let maxTime = this.randomRange(2500, 4000) //抽奖的时间2.5s-4s之间
					console.log(maxTime)
					let rI = 0.01
					console.log(this.nowRunIndex)
					if (this.nowRunIndex == 0) { //初始化从索引0开始显示抽奖激活的边框
						this.setData({
							'prize_list[0].active': true
						})
					}

					function runAni(_t) {
						that.Timer = setTimeout(() => {
							let list = that.data.prize_list;
							++that.nowRunIndex;
							that.nowRunIndex >= that.data.prizeListIndex.length ? that.nowRunIndex = 0 :
							'';
							console.log(that.nowRunIndex >= that.data.prizeListIndex.length)
							console.log(that.nowRunIndex)
							let Pindex = that.data.prizeListIndex[that.nowRunIndex];
							list.map((item, index) => {
								item.active = Pindex == index;
							})
							that.setData({
								prize_list: list
							})
							console.log(that.LotteryEnd)
							console.log(luckIndex == that.nowRunIndex)
							if (that.LotteryEnd && luckIndex == that.nowRunIndex) {
								clearTimeout(that.Timer);
								that.LotteryEnd = false;
								that.setData({
									lock: false
								})
								resolve(list.filter(v => {
									return v.active
								}))
							} else {
								rI += 0.5;
								runAni(_t + (rI));
							}
						}, _t);
					}
					runAni(80);
					setTimeout(() => {
						this.LotteryEnd = true;
					}, maxTime);
				})
			},

			onPageScroll: function(e) {
				console.log(e)
			},
			// 抽奖活动
			lottery() {
				// 防止重复点击
				if (this.data.lock) return
				this.setData({
					lock: true
				})
				this.luckChose(this.randomRange(0, 7)).then(e => {
					wx.showToast({
						title: '成抽中了' + e[0].name,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to right, #90e0fc, #d4f2ff, #90e0fc);
		padding-bottom: 40rpx;
	}

	.con {
		width: 743rpx;
		height: 824rpx;
		margin: 50px auto 18rpx;
		position: relative;
		box-sizing: border-box;
		padding: 35rpx 0 79rpx;
	}

	.bg_img {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.draw_sc {
		width: 637rpx;
		height: 69rpx;
		background: rgb(0, 146, 241, .53);
		border-radius: 34rpx;
		padding: 0 30rpx;
		margin-left: 25px;
		box-sizing: border-box;
	}

	.draw_icon {
		width: 37rpx;
		height: 29rpx;
		margin-right: 25rpx;
		margin-top: 20rpx;
	}

	.swiper {
		height: 100%;
		font-size: 28rpx;
		margin-top: -28px;
		color: #fff;
		flex: 1;
		text-align: center;
		line-height: 69rpx;
	}

	.draw_text {
		color: #FFF000;
	}

	.draw_con {
		width: 671rpx;
		height: 610rpx;
		position: relative;
		box-sizing: border-box;
		padding: 52rpx 42rpx;
		margin-left: 36rpx;
		margin-top: 5rpx;
	}

	.btn {
		width: 560rpx;
		height: 97rpx;
		background: linear-gradient(0deg, #0084FF 0%, #00DEFF 100%);
		box-shadow: -4rpx 5rpx 8rpx 0px rgba(7, 53, 130, 0.32);
		border-radius: 48rpx;
		text-align: center;
		line-height: 97rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 18rpx auto 45rpx;
	}

	.b {
		right: 20rpx;
		width: 200rpx;
		font-size: 25rpx;
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		margin-top: 20rpx;
	}

	.draw_bot {
		width: 704rpx;
		height: 340rpx;
		box-shadow: 0px 0px 73rpx 0px #FFFFFF inset;
		border-radius: 30rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 43rpx 0;
	}

	.bot_title {
		font-size: 36rpx;
		font-weight: bold;
		color: #014493;
		text-align: center;
		margin: 0 22rpx;
	}

	.line {
		width: 138rpx;
		height: 1rpx;
		background: #014493;
		position: relative;
	}

	.line::before {
		content: '';
		position: absolute;
		width: 49rpx;
		height: 1rpx;
		background: #014493;
		bottom: -7rpx;
	}

	.line:nth-child(1):before {
		right: 0;
	}

	.bot_swiper {
		width: 629rpx;
		height: 150rpx;
		font-size: 28rpx;
		color: #084A96;
		margin: 51rpx auto 0;
		overflow: hidden;
	}

	.bot_swiper view {
		overflow: hidden;
		width: 100%;
	}

	.bot_text {
		color: #EB360C;
	}

	.remainin_text {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
	}

	.remainin_text text {
		color: #FFF32F;
	}

	.prize_box {
		flex-wrap: wrap;
	}

	.prize_item {
		float: left;
		width: 186rpx;
		height: 156rpx;
		background: #F7FCFC;
		box-shadow: -6rpx 8rpx 16rpx 0px rgba(7, 53, 130, 0.11) inset;
		border-radius: 34rpx;
		margin-bottom: 14rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #014493;
		text-align: center;
		margin-left: 9rpx;
		box-sizing: border-box;
		padding-top: 10rpx;
	}

	.prize_start {
		padding-top: 0 !important;
	}

	.lott_btn {
		width: 100%;
		height: 100%;
	}


	.prize_img image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5rpx;
	}

	.ative {
		position: relative;
		border: 2rpx solid transparent;
		box-shadow: none;
	}

	.ative::after {
		content: '';
		position: absolute;
		top: -8rpx;
		bottom: -8rpx;
		left: -8rpx;
		right: -8rpx;
		background: linear-gradient(0deg, #FFCD1E, #FFEFB7);
		z-index: -1;
		border-radius: 34rpx;
	}
</style>
